<template>
  <page-header-wrapper>
    <a-card class="table-card">
      <GzSearchForm :searchFunc="searchFunc" :resetFunc="() => { searchData = {} }" searchConditionNum="6">
        <gz-text-up v-model:value="searchData['mchNo']" :placeholder="'商户号'" />
        <gz-text-up v-model:value="searchData['ifName']" :placeholder="'通道名称'" />
      </GzSearchForm>

      <!-- 列表渲染 -->
      <GzTable
        ref="infoTable"
        :init-data="true"
        :req-table-data-func="reqTableDataFunc"
        :table-columns="tableColumns"
        :search-data="searchData"
        row-key="mchNo"
        @btnLoadClose="btnLoading = false"
      />
    </a-card>
  </page-header-wrapper>
</template>
<script setup lang="ts">
import { $mchChannel } from '@/api/mch/index'
import { ref, reactive,  } from 'vue'

const infoTable = ref()
let tableColumns = reactive([
  { key: 'mchNo', title: '商户号', dataIndex: 'mchNo', width: 140, minWidth: 140, maxWidth: 170 },
  { key: 'ifCode', title: '通道编号', dataIndex: 'ifCode', width: 100, minWidth: 100, maxWidth: 250 },
  { key: 'ifName', title: '通道名称', dataIndex: 'ifName', width: 100, minWidth: 100, maxWidth: 250 },
  { key: 'aliSubmerchantNo', title: '支付宝间连号', dataIndex: 'aliSubmerchantNo', width: 200, minWidth: 150, maxWidth: 250 },
  { key: 'wechatSubmerchantNo', title: '微信间连号', dataIndex: 'wechatSubmerchantNo', width: 200, minWidth: 150, maxWidth: 250 },
  { key: 'ysfSubmerchantNo', title: '云闪付间连号', dataIndex: 'ysfSubmerchantNo', width: 200, minWidth: 150, maxWidth: 250 },
  { key: 'createdAt', title: '创建日期', dataIndex: 'createdAt', width: 160, minWidth: 200, maxWidth: 230 },
  { key: 'updatedAt', title: '更新日期', dataIndex: 'updatedAt', width: 160, minWidth: 200, maxWidth: 230 },
])

let btnLoading = ref(false)
let searchData = ref({})

// 请求table接口数据
function reqTableDataFunc(params: any) {
  return $mchChannel(params)
}
function searchFunc() { // 点击【查询】按钮点击事件
  infoTable.value.refTable(true)
}

</script>
